<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <link rel="stylesheet" href="./css/userCard.css">
    <link rel="stylesheet" href="../assets/notice/notice.css">
    <script src="../assets/notice/notice.js"></script>
    <script src="../assets/axios/axios.js"></script>
    <script src="../assets/qs/qs.js"></script>
    <script>
        // console.log(qs)
        console.log(Qs)
        console.log(Qs.parse("a=1&b=2"))
        console.log(Qs.stringify({ a: 1, b: 2 }))

    </script>
    <script src="./utils/request.js"></script>
    <script>
        // 请求过程传递的数据：请求报文 【 请求报文头，请求报文体 】
        // 响应过程传递的数据：响应报文 【 响应报文头，响应报文体 】
        /*
        1、无请求体和无响应体的请求
            (options,head) ==> 测试请求

        2、无请求体和有响应体的请求
            (get) ==> 参数方式单一
                         ==> 这类请求只能使用 URL地址参数 (get参数) (Query String Parameters 参数)

        3、有请求体和有响应体的请求 ==> 参数方式丰富
            (post,put,patch,delete,……)
        */

        /*
        请求报文体参数（请求体参数）【 如果报文参数格式和服务器无法匹配，多数会提示 HTTP 400 错误=错误请求 】
            + 自定义格式报文体
                => 请求报文载荷 => 在浏览器中这类参数被命名为 Request payload

            + 表单文本报文体
                => 表单请求报文 => 在浏览器中这类参数被命名为 Form Data
                               => 请求报文中描述数据类型为 application/x-www-form-urlencoded
                               => 参数以 URL地址参数规则组成 key=value&key=value&……
            
            + 表单二进制报文体
                => 表单请求报文 => 在浏览器中这类参数被命名为 Form Data
                               => 请求报文中描述数据类型为 multipart/form-data
                               => 参数必须是一个特殊的 表单数据对象 FormData

        请求报文参数的携带会在请求报文头中增加 Content-type 描述字段，该字段的目的是为了告知服务器参数的类型格式
        */

        // let xhr = new XMLHttpRequest();
        // xhr.open("post","http://127.0.0.1:3000/api/params")
        // xhr.onload = function(){}
        // xhr.send(请求报文体参数);
        // xhr.send({a:1,b:2})
        // xhr.send([1,2,3,4,5])

        // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        // xhr.send("a=1&b=2")

        function sendRequestPayload() {
            axios({
                url: "http://127.0.0.1:3000/api/params",
                method: "post",
                // `data` 是作为请求体被发送的数据
                // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
                // 自定义格式报文参数：取值不是FormData对象或者URL参数字符串【key=value&……】，都为自定义格式报文
                data: {
                    firstName: 'Fred',
                    userId: 100001,
                    className: "wbs222222",
                    name: document.querySelector("#name").value
                },
            }).then(function (data) {
                console.log(data)
            })
        }
        function sendRequestPayload2() {
            axios({
                url: "http://127.0.0.1:3000/api/params",
                method: "post",
                data: [1, 2, 3, 4, 5, 6],
            }).then(function (data) {
                console.log(data)
            })
        }


        function sendRequestForm() {
            axios({
                url: "http://127.0.0.1:3000/api/params",
                method: "post",
                // 自定义请求头
                // axios 中 表单文本数据发送时不再需要手动设置数据类型，axios会自动根据data数据格式选择合适类型描述
                // headers:{
                //     "Content-type":"application/x-www-form-urlencoded"
                // },
                // 当需要发送表单文本数据时，必须将数据格式转变为 URL 参数格式
                data: Qs.stringify({
                    firstName: 'Fred',
                    userId: 100001,
                    className: "wbs222222",
                    name: document.querySelector("#name").value
                }),
            }).then(function (data) {
                console.log(data)
            })
        }

        function sendRequestFile() {
            let fd = new FormData();
            // fd.append(参数名,参数取值-任何数据类型-JS读取文件二进制对象)
            fd.append("msg", "测试消息")
            fd.append("num", 100)
            fd.append("arr", [1, 2, 3, 4, 5])
            fd.append("name", document.querySelector("#name").value)

            // file 文件元素的 value 属性为只读且安全隐藏数据，返回数据是无用数据
            let imgDom = document.querySelector("#img")
            // console.log( imgDom.value )
            // 加载被当前DOM元素完成浏览器缓存的文件对象信息
            // console.log( imgDom.files )
            // File 是JS中文件数据对象
            // URL.createObjectURL(File对象) 可以将当前浏览器中缓存的二进制文件数据，构建出一个以 blob: 开头的临时访问地址
            //      该地址可以作为普通文件请求地址进行使用（例如 img 的 src 取值）
            // let a = URL.createObjectURL(imgDom.files[0])
            // console.log(a)
            fd.append("img", imgDom.files[0])
            // fd.append("head",imgDom.files[0])

            axios({
                url: "http://127.0.0.1:3000/api/params",
                method: "post",
                data: fd
            }).then(function (data) {
                console.log(data)
            })
        }
    </script>
</head>

<body>
    <label>
        name: <input type="text" id="name">
    </label>
    <br>
    <label>
        <!-- file: <input type="file" id="img" multiple> -->
        file: <input type="file" id="img">
    </label>
    <br>
    <input type="button" value="请求载荷发送" onclick="sendRequestPayload()">
    <br>
    <input type="button" value="请求载荷发送-array" onclick="sendRequestPayload2()">
    <br>
    <input type="button" value="表单文本请求数据" onclick="sendRequestForm()">
    <br>
    <input type="button" value="表单文件请求数据" onclick="sendRequestFile()">


    <!-- <form action="" enctype="application/x-www-form-urlencoded"></form>
    <form action="" enctype="multipart/form-data">
        <input type="file" name="" id="">
    </form> -->

    <!-- <img src="d:\Users\User\Desktop\Desert.jpg" alt="" srcset=""> -->
</body>

</html>